﻿<MCard Class="mx-auto" MaxWidth="400">

    <MSystemBar Color="pink darken-2" Dark>
        <MSpacer></MSpacer>
        <MIcon>mdi-window-minimize</MIcon>
        <MIcon>mdi-window-maximize</MIcon>
        <MIcon>mdi-close</MIcon>
    </MSystemBar>

    <MAppBar Dark Color="pink">
        <MAppBarNavIcon></MAppBarNavIcon>
        <MToolbarTitle>My Music</MToolbarTitle>
        <MSpacer></MSpacer>
        <MButton Icon>
            <MIcon>mdi-magnify</MIcon>
        </MButton>
    </MAppBar>

    <MContainer>
        <MRow Dense>

            <MCol Cols=12>
                <MCard Color="#385F73" Dark>
                    <MCardText Class="text-h5">Unlimited music now</MCardText>
                    <MCardSubtitle>Listen to your favorite artists and albums whenever and wherever, online and offline.</MCardSubtitle>
                    <MCardActions>
                        <MButton Text>
                            Listen Now
                        </MButton>
                    </MCardActions>
                </MCard>
            </MCol>
            @for (var i = 0; i < _cards.Length; i++)
            {
                var card = _cards[i];

                <MCol key="@i" Cols=12>
                    <MCard Color="@card.Color" Dark>
                        <div class="d-flex flex-no-wrap justify-space-between">
                            <div>

                                <MCardTitle Class="text-h5">
                                    @card.Title
                                </MCardTitle>

                                <MCardSubtitle>
                                    @card.Artist
                                </MCardSubtitle>

                                <MCardActions>
                                    @if (card.Artist == "Ellie Goulding")
                                    {
                                        <MButton Class="ml-2 mt-3" Fab Icon Height=40 Right Width=40>
                                            <MIcon>mdi-play</MIcon>
                                        </MButton>
                                    }
                                    else
                                    {
                                        <MButton Class="ml-2 mt-5" Outlined Rounded Small>START RADIO</MButton>
                                    }
                                </MCardActions>
                            </div>
                            <MAvatar Class="ma-3" Size=125 Tile>
                                <MImage Src="@card.Src"></MImage>
                            </MAvatar>
                        </div>
                    </MCard>
                </MCol>
            }

        </MRow>
    </MContainer>

</MCard>

@code {
    Card[] _cards = new[]
    {
        new Card
        {
            Color="#1F7087",
            Src="https://cdn.masastack.com/stack/images/website/masa-blazor/cards/foster.jpg",
            Title="Supermodel",
            Artist="Foster the People"
        },
        new Card
        {
            Color="#952175",
            Src="https://cdn.masastack.com/stack/images/website/masa-blazor/cards/halcyon.png",
            Title="Halcyon Days",
            Artist="Ellie Goulding"
        }
    };

    class Card
    {
        public string Color { get; set; }
        public string Src { get; set; }
        public string Title { get; set; }
        public string Artist { get; set; }
    }
}